<template>
	<view class="center">
		<!-- 头部 -->
	<!-- 	<view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">新增客户</view>
			<view></view>
		</view> -->
		<hea-ders title="新增客户">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<!-- 内容 -->
		<view class="customers_one">
			<view class="customer_item">
				<image src="../../../static/images/1332.png" mode=""></image>
				<text>基础信息</text>
			</view>
		</view>
		<view class="customers_ones">
			<text>客户编号<i>*</i></text>
			<text>12345678</text>
		</view>
		<view class="customers_ones">
			<text>客户名称<i>*</i></text>
			<text>张三</text>
		</view>
		<!-- 带下拉弹框的 -->
		<uni-collapse accordion="true" class="screen">
			<uni-collapse-item title="客户级别" class="screen_one" >
				<view class="screen_ones">
					<view class="screen_three" @click="change">
						<text>批发客户</text>
					</view>
					<image :src="flag? '' :'../../../static/images/1333.png'" mode=""></image>
				</view>
				<view class="screen_ones" @click="change" >
					<view class="screen_three" >
						<text>零售客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="客户等级" class="screen_one">
				<view class="screen_ones">
					<view class="screen_three" @click="change">
						<text>小型客户</text>
					</view>
					<image :src="flag? '' :'../../../static/images/1333.png'" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three">
						<text>中型客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three">
						<text>大型客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three">
						<text>VIP客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="客户状态" class="screen_one">
				<view class="screen_ones">
					<view class="screen_three" style="text-align: center;width: 100%;" @click="change">
						<text>初步沟通</text>
					</view>
					<image :src="flag? '' :'../../../static/images/1333.png'" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>见面拜访</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>确定意向</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>正式报价</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>商务洽谈</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>签约成交</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>停滞客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
				<view class="screen_ones" @click="change">
					<view class="screen_three" style="text-align: center;width: 100%;">
						<text>流失客户</text>
					</view>
					<image src="../../../static/images/1333.png" mode=""></image>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="customers_ones customers_item"  @tap="$open('../warehouse/warehouse')">
			<text style="color: #494949;">所属仓库</text>
			<view class="">
				<text>选择</text>
				<image src="../../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="customers_item">
			<text style="color: #494949;font-size: 28rpx;">备注</text>
			<view class="">
				<textarea value="" placeholder="" />
			</view>
		</view>
		
		<!-- 联系人 -->
		<view class="customers_one customer_lianxi">
			<view class="customer_item">
				<image src="../../../static/images/12.png" mode="aspectFill"></image>
				<text>联系人</text>
			</view>
			<view class="customers_ones">
				<text>姓名<i>*</i></text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>联系电话<i>*</i></text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>职务</text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>QQ</text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>微信</text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>电子邮箱</text>
				<input type="text" value="" />
			</view>
			<view class="customers_ones">
				<text>地址</text>
				<input type="text" value="" />
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="customer_foot">
			<button type="default">保存</button>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			uniSection,
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem,
			heaDers
		},
		data() {
			return {
				flag: false
			}
		},
		methods: {
			change() {
				this.flag = !this.flag;
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center{
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
		
				width: 22rpx;
			}
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		
		.customers_one {
			// padding: 24rpx 0 24rpx 30rpx;
			border-bottom: 1px solid #F5F5F5;
			height: 88rpx;
			.customer_item image {
				width: 40rpx;
				height: 40rpx;
			}
		
			.customer_item {
				display: flex;
				align-items: center;
				line-height: 88rpx;
				padding-left: 20rpx;
			}
		
			.customer_item text {
				font-size: 28rpx;
				color: #424242;
				margin-left: 16rpx;
			}
		}
		.customers_ones {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F5F5F5;
			height: 88rpx;
			padding: 0 20rpx;
			text {
				font-size: 28rpx;
				color: #424242;
			}
			i {
				color: red;
			}
			input{
				width: 80%;
			}
		}
		.screen_one {
			background: #fff;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #F5F5F5;
			.screen_three {
				height: 90rpx;
				font-size: 28rpx;
				color: #9e9e9e;
				background: #FCFCFC;
				line-height: 88rpx;
				border-bottom: 1px solid #F5F5F5;
				text-align: center;
				width: 100%;
			}
			.screen_ones {
				display: flex;
			}
			image {
				width: 88rpx;
				height: 88rpx;
				background: #FCFCFC;
			}
		}
		.customers_item{
			display: flex;
			padding: 15rpx;
			image{
				width: 15rpx;
				height: 30rpx;
				padding-left: 15rpx;
			}
			text{
				color: #9E9E9E;
			}
			textarea{
				height: 160rpx;
				margin-left: 35rpx;
			}
		}
		.customer_lianxi{
			border-top: 10rpx solid #F5F5F5;
		}
		.customer_foot{
			margin-top: 83%;
			position: relative;
			top: 100%;
			width: 100%;
			border-top: 56rpx solid #f5f5f5;
			button{
				height: 88rpx;
				background: #2399F6;
				color: #fff;
				font-size: 28rpx;
				border-radius: 0;
				line-height: 88rpx;
			}
		}
		
	}
</style>
